<!--  -->
<template>
  <div class="About">
    <div class="dl">
      <div class="login" v-if="s">
        <input type="text" v-model="name" />
        {{dlts}}
        <input type="button" value="登录" @click="lo" />
      </div>
      <div class="logout" v-else>
        {{name}}
        <input type="button" value="退出" @click="out" />
      </div>
    </div>

    <div class="cz">
      <div class="yc" v-show="s"></div>
      <h4>{{list[index].title}}</h4>
      <ul>
        <li v-for="(item,index) of list[index].options">
          <input type="radio" name="t" id :value="index" v-model="a" />
          {{item}}
        </li>
      </ul>
      {{hdts}}
      <input type="button" value="提交" @click="tj" />
      {{djs}}
      <p>共有1/4道题 答对{{hdzq}} 答错{{hdcw}}</p>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      name: "",
      dlts: "",
      hdts: "",
      djs: "",
      hdzq: 0,
      hdcw: 0,
      list: [],
      index: 0,
      s: true,
      a: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    lo() {
      if (this.name.length >= 6) {
        this.s = false;
      } else {
        this.dlts = "请输入6位以上的用户名";
      }
    },
    out() {
      this.s = true;
      this.name = "";
      this.dlts = "";
    },
    tj() {
      if (this.a == this.list[this.index].right) {
        this.hdts = "回答正确";
        this.hdzq = this.hdzq + 1;
      } else {
        this.hdts = "回答错误";
        this.hdcw = this.hdcw + 1;
      }
      this.daojishi();
    },
    daojishi() {
      var n = 3;
      var time = setInterval(() => {
        n--;
        this.djs = n + "秒后进入下一题";
        
      }, 500);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    var res = await this.http.get("data2.json");
    console.log(res);
    this.list = res.data.data;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
li {
  list-style: none;
}
.About {
  width: 100%;
  height: 900px;
}
.dl {
  float: left;
  width: 40%;
  height: 100%;
}
.cz {
  float: left;
  width: 59%;
  height: 100%;
  border-left: 1px solid #000;
  .yc {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>